<template>
  <div id="home">
    <!-- <header class="fb">
      <img class="logo" src="../assets/img/logo.png" alt="" />
      <div class="center fc">
        <div class="">
          <i class="iconfont icon-location" />拱墅区
          <i class="iconfont icon-xiala" />
        </div>
        <span>拱墅区平台 · 驾驶舱</span>
        <span>部门|区县|街道</span>
      </div>
      <div class="tip">
        <span>拱墅区 · 驾驶舱</span> · 欢迎进入 <br />2020-08-14 星期五 15:00:00
      </div>
    </header> -->
    <!-- <div class="contain fc"> -->
      <div class="left fbd">
        <!-- 人 -->
        <people />
        <oecd />
        <business />
      </div>
      <div class="middle fbd">
        <oecdmid />
        <mapcontain />
      </div>
      <div class="right fbd">
        <capital />
        <house />
      </div>
    <!-- </div> -->
    <div @click="visible = !visible" class="catalog">
      <i class="iconfont icon-ziyuan1"></i>
      <span class="badge">0</span>
    </div>
    <div v-show="visible" class="content">
      <div class="text">
        管理展示模块
        <i @click="visible = false" class="iconfont icon-close"></i>
      </div>
      <div @click="show = true" class="item">
        经合社“三资”管理
        <!-- <i class="iconfont icon-close"></i> -->
      </div>
      <div @click="show = false" class="item">
        房
        <!-- <i class="iconfont icon-close"></i> -->
      </div>
      <div v-show="show" class="palebox">
        <div
          @click="activeIndex1 = index1"
          v-for="(item1, index1) in modul1"
          class="item"
          :key="index1"
          :class="activeIndex1 == index1 ? 'active' : ''"
        >
          {{ item1 }}
          <!-- <i class="iconfont icon-close"></i> -->
        </div>
      </div>
      <div v-show="!show" class="palebox">
        <div
          @click="activeIndex2 = index2"
          v-for="(item2, index2) in modul2"
          class="item"
          :key="index2"
          :class="activeIndex2 == index2 ? 'active' : ''"
        >
          {{ item2 }}
          <!-- <i class="iconfont icon-close"></i> -->
        </div>
      </div>
      <div
        @click="visible = false"
        style="text-align:center"
        class="text btn mt10"
      >
        保存
      </div>
    </div>
  </div>
</template>
<script>
import { get, post } from "@/utils/axios";
import people from "@/components/people";
import oecd from "@/components/oecd";
import business from "@/components/business";
import oecdmid from "@/components/oecdmid";
import mapcontain from "@/components/mapcontain";
import capital from "@/components/capital";
import house from "@/components/house";
export default {
  components: {
    people,
    oecd,
    business,
    oecdmid,
    mapcontain,
    capital,
    house,
  },

  data() {
    return {
      visible: false,
      show: false,
      activeIndex1: 0,
      activeIndex2: 0,
      modul1: ["模块一", "模块二"],
      modul2: ["房模块一", "房模块二"],
    };
  },
  watch: {},

  created() {},
  mounted() {},
  methods: {},
};
</script>
<style lang="scss" scoped>
#home {
  width: 100vw;
  height: 100vh;
  color: $WH;
  font-size: 0.14rem;
  padding: 4vh 2vw 4vh;
  box-sizing: border-box;
  background: url(../assets/img/allbg.png) center no-repeat;

  background-size: 100% 100%;

  // padding-top: 100px;
  // background: url("../assets/img/bg.png") center no-repeat;
  // background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  // display: grid;
  // grid-template-columns: 5.26rem 7.94rem 5.26rem;
  // gap: 0.3rem;
  // header {
  //   padding: 0 0.45rem;
  //   height: 1.4rem;
  //   line-height: 0.95rem;
  //   text-align: center;
  //   color: #fff;
  //   font-size: 0.55rem;
  //   position: relative;
  //   .logo {
  //     width: 2.5rem;
  //   }
  //   .center {
  //     align-self: start;
  //     width: 9.5rem;
  //     font-size: 0.2rem;
  //     span:nth-of-type(1) {
  //       font-size: 0.55rem;
  //       margin: 0 0.25rem;
  //     }
  //   }
  //   .tip {
  //     width: 3rem;
  //     text-align: right;
  //     line-height: 0.375rem;
  //     font-size: 0.1625rem;
  //     color: #ffffff;
  //     span {
  //       font-size: 0.275rem;
  //     }
  //   }
  // }
  .contain {
    // height: calc(100vh - 1.4rem);
    // background: url(../assets/img/allbg.png) center no-repeat;

    // background-size: 100% 100%;
    // overflow: hidden;
  }
  .left {
    width: 5.2rem;
    overflow: hidden;
    // height: 300px;
    // background-color: $WH;
    // display: grid;
    // grid-template-rows: 26vh 41vh 28vh;
    // row-gap: 1vh;
  }
  .right {
    width: 5.2rem;
    // height: 300px;
    // background-color: $WH;
    // display: grid;
    // grid-template-rows: 18vh 47vh 30vh;
    // row-gap: 1vh;
  }
  .middle {
    width: 8rem;
    // height: 300px;
    // background-color: $WH;
    // display: grid;
    // grid-template-rows: 27vh 49vh 20vh;
    // row-gap: 1vh;
  }
  .catalog {
    width: 0.4rem;
    height: 0.4rem;
    line-height: 0.4rem;
    background: #0474f4;
    border-radius: 0.04rem;
    vertical-align: center;
    text-align: center;
    position: fixed;
    bottom: 5vh;
    right: 0;
    z-index: 9999;
    .badge {
      display: inline-block;
      width: 0.17rem;
      line-height: 0.17rem;
      text-align: center;
      background-color: #179089;
      border-radius: 0.04rem;
      position: absolute;
      top: -0.06rem;
      left: -0.06rem;
    }
    .icon-ziyuan1 {
      cursor: pointer;
      font-size: 0.2rem;
    }
  }
  .content {
    width: 2.85rem;
    height: 1.84rem;
    background-color: #023168;
    border-radius: 0.04rem;
    position: fixed;
    bottom: 3vh;
    right: 0.6rem;
    z-index: 9999;

    .text {
      text-align: center;
      color: $WH;
      line-height: 0.28rem;
      background-image: linear-gradient(#035dc4, #035dc4);
      .icon-close {
        cursor: pointer;
        font-size: 0.12rem;
        padding-right: 0.1rem;
        float: right;
      }
    }
    .palebox {
      margin-top: 0.04rem;
      padding-top: 0.08rem;
      border-top: 1px solid rgb(18, 58, 128);
    }
    .item {
      cursor: pointer;
      margin: 0.1rem;
      padding: 0 0.2rem;
      line-height: 0.28rem;
      border-radius: 0.04rem;
      border: solid 1px rgb(32, 71, 119);
      display: inline-block;
      position: relative;
      .icon-close {
        width: 0.2rem;
        line-height: 0.2rem;
        border-radius: 50%;
        transform: scale(0.8);
        color: rgb(190, 190, 190);
        background: rgb(32, 71, 119);
        font-size: 0.12rem;
        position: absolute;
        right: -0.06rem;
        top: -0.09rem;
      }
      &.active {
        color: $WH;
        background-image: linear-gradient(#035dc4, #035dc4);
      }
    }
    .btn {
      cursor: pointer;
      margin: 0 auto;
      width: 0.8rem;
      line-height: 0.24rem;
      background-image: linear-gradient(0deg, #034fa6 0%, #0474f4 100%);
      border-radius: 4px;
      border: solid 1px $BL;
    }
  }
}
</style>
